<template>
    <div class="login">
        <div class="login_box">
            <div class="login_title">
                <span class="title_detail">鑫海融达渤海P2C后台</span>
            </div>
            <div class="login_mobile">
                <img class="login_mobile_1" src='../../assets/img/login_icon1.png'>
                <input class="login_mobile_2" v-model="formData.mobile" placeholder="账户名">
            </div>
            <div class="login_password">
                <img class="login_password_1" src='../../assets/img/login_icon1.png'>
                <input class="login_password_2"  type="password" v-model="formData.password" placeholder="账户密码">

            </div>
            <div class="login_code">
             <input class="login_code_1" v-model="formData.code" placeholder="请输入验证码">
                <img class="login_code_2" :src="imgUrl" @click="getImgCode">
            </div>
            <div class="login_button">
                <el-button class="login_button_1" type="primary" @click="login">登录</el-button>
            </div>
    </div>
    </div>
</template>

<script>
    import 'element-ui/lib/theme-chalk/index.css';
    export default {
        name: "index",
        data(){
            return {
                formData: {
                    mobile: "",
                    password: "",
                    code: ""
                },
                imgUrl: '',
            };
        },
        mounted() {
        },
        computed:{
        },
        created() {
            this.getImgCode();
        },
        methods: {
            getImgCode() {
                this.$api.getImgCode().then((res)=>{
                    this.imgUrl = res.code;
                    // this.$router.push({path:'/order',query:{}}) // query 为传去下个页面的参数，需要转为json字符串
                },(err)=>{
                    this.$message.error(err.msg)
                })
            },
            login(){
                if(!(/^1[23456789]\d{9}$/.test(this.formData.mobile))){
                    this.$message.error('请输入正确的手机号')
                    return
                }
                if(this.formData.password==''){
                    this.$message.error('请输入密码')
                    return
                }
                if(this.formData.code=='') {
                    this.$message.error('请输入验证码')
                    return
                }
                this.$api.login(this.formData).then((res)=>{
                    this.$message.success("登录成功")
                    localStorage.setItem("token",res.token)
                    setTimeout(()=>{
                        // this.$router.push({path:'/userList',query:{}})
                        this.$commonJs.goPage('/userList')
                    },1000)
                },(err)=>{
                    this.$message.error(err.msg)
                })
            }
        },
    }
</script>
<style scoped lang="less">
    input::-webkit-input-placeholder {
        color: #C7C9CD;
    }
    input::-moz-input-placeholder {
        color: #C7C9CD;
    }
    input::-ms-input-placeholder {
        color: #C7C9CD;
    }
    .login {
        position: absolute;
        background: url("../../assets/img/login_bk.jpg") no-repeat;
        top:0;
        left:0;
        right:0;
        bottom: 0;
        .login_box{
            position: relative;
            left: 60%;
            top:10rem;
            height: 24rem;
            width: 28.5rem;
            background-color: #ffffff;
            border-radius: 0.5rem;
            .login_title{
                padding-top: 2rem;
                .title_detail{
                    font-family: "MicrosoftYaHei",Georgia,Serif;
                    font-size: 1.8rem;
                    color: #409EFF;
                }
            }
            .login_mobile{
                position: relative;
                margin-top: 1.5rem;
                width: 440px;
                height: 70px;
                left: 22%;
                border: #C7C9CD 1px solid;
                border-radius: 0.5rem;
                .login_mobile_1{
                    position: absolute;
                    height: 30px;
                    width: 30px;
                    top:50%;
                    left:1rem;
                    transform: translate(0,-50%);
                }
                .login_mobile_2{
                    border: none;
                    position: absolute;
                    top: 50%;
                    left: 3rem;
                    width: 10rem;
                    transform: translate(0,-50%);
                    font-family: MicrosoftYaHei;
                    font-size: 20px;
                    color: #99a9bf;
                }
            }
            .login_password{
                position: relative;
                margin-top: 1.5rem;
                width: 440px;
                height: 70px;
                left: 22%;
                border: #C7C9CD 1px solid;
                border-radius: 0.5rem;
                .login_password_1{
                    position: absolute;
                    height: 30px;
                    width: 30px;
                    top:50%;
                    left:1rem;
                    transform: translate(0,-50%);
                }
                .login_password_2{
                    border: none;
                    position: absolute;
                    top: 50%;
                    left: 3rem;
                    width: 10rem;
                    transform: translate(0,-50%);
                    font-family: MicrosoftYaHei;
                    font-size: 20px;
                    color: #99a9bf;
                }
            }
            .login_code{
                position: relative;
                margin-top: 1.5rem;
                width: 440px;
                height: 70px;
                left: 22%;
                border: #C7C9CD 1px solid;
                border-radius: 0.5rem;
                .login_code_1{
                    position: absolute;
                    width: 9rem;
                    top:50%;
                    left:1rem;
                    transform: translate(0,-50%);
                    font-family: MicrosoftYaHei;
                    font-size: 20px;
                    color: #99a9bf;
                    border: none;
                }
                .login_code_2{
                    border: none;
                    position: absolute;
                    top: 50%;
                    left: 11rem;
                    width:4rem;
                    height: 2rem;
                    transform: translate(0,-50%);

                }
            }
            .login_button{
                position: relative;
                margin-top: 1.5rem;
                width: 440px;
                height: 70px;
                left: 22%;
                .login_button_1{
                    width: 100%;
                    height: 100%;
                    border-radius: 0.6rem;
                    font-size: 30px;
                }
            }
        }
    }
</style>

